<extend name="./Public/base" />
<block name="title">测试分析</block>
<block name="head">
	<load href="__PUBLIC__/Css/header.css"/>
	<load href="__PUBLIC__/Css/analyze.css"/>
</block>

<block name="header">
	<include file="Application/Home/View/Public/header_question.html" action="analyze"/>
</block>
<block name="main">
	<div class="alert alert-danger hidden" role="alert"></div>
	<div class="alert alert-success hidden" role="alert"></div>
	<div class="loading">
		<i class="fa fa-spinner fa-spin fa-3x"></i>
	</div>
	<div class="container" id="analyze-container" style="display:none">
		<div class="row">
			<div class="col-md-8 col-md-offset-1">
				<p class="quiz-name">{{ quiz.qus_name }}</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-8 col-md-offset-1 anal-title">
				<span class="anal-time">统计截至 {{ others.datetime.substring(0, 16)}}</span>
				<span class="anal-num">答卷人数 {{ others.submitNum + "/" + others.stuNum}}</span>
			</div>
			<div class="col-md-2">
				<button class="btn btn-info exportQuizGrades">导出成绩表</button>
			</div>
		</div>
		<div v-if="parseInt(others.submitNum) > 0">
			<div class="row">
				<div class="col-md-10 col-md-offset-1">
					<div class="panel">
						<div class="panel-body">
							<div class="chart-title">
								<span class="chart-til">得分统计</span>
								<div class="pull-right chart-tir">
									<span>满分：<strong>{{ others.totalScore }}</strong></span>
									<span>试卷平均分：<strong>{{ others.avg }}</strong></span>
									<span>(最高分{{ others.max }},最低分{{ others.min }})</span>
								</div>
							</div>
							<canvas id="anal-chart" width="900px" height="200px"></canvas>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-10 col-md-offset-1">
					<div class="panel panel-default">
						<div class="panel-heading que-heading">
							<a href="javascript:;" class="btn-sort btn-active " v-on:click="sortBySer">
								题号
								<span class="glyphicon glyphicon-arrow-up"></span>
							</a><a href="javascript:;" class="btn-sort " v-on:click="sortByAccu">
							正确率
							<span class="glyphicon glyphicon-arrow-up"></span>
						</a>
							<div class="dropdown pull-right">
								<a class="btn-sort dropdown-toggle" href="javascript:;" data-toggle="dropdown">{{ typeValue[curType] }} <span class="caret"></span></a>
								<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
									<li v-for="type in typeValue"><a href="javascript:;" v-on:click="disByType($index)">{{ type }}</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row" v-for="que in questions" track-by="que_id">
				<div class="col-md-10 col-md-offset-1">
					<div class="panel anal-panel" v-show="curType == 5 || curType == que.que_type">
						<div class="panel-body">
							<div class="box-title">
								<span class="que-num">{{ que.que_num + "、" + typeValue[que.que_type] }}</span>
								<span class="que-score">分值 {{ que.que_score }}</span>
								<span class="text-danger" v-if="que.que_type<=2">答案 {{ que.que_answer | showItemCode }}</span>
								<span class="text-danger" v-if="que.que_type==3">答案 {{ que.que_answer }}</span>
								<span class="text-danger pull-right" v-if="que.que_type<=3">正确率 {{ que.accuracy }}</span>
							</div>
							<div class="box-body">
								<p>{{ que.que_content }}</p>
								<template v-if="que.que_type<=2">
									<div class="items" v-for="item in que.que_item" >
										{{ $index | showItemCode }}. {{ item.content }}
										<div class="clearfix">
											<div class="progress pull-left">
												<div class="progress-bar" v-bind:style="'width: ' + item.per"></div>
											</div>
											<div class="item-det pull-left">
												<span class="text-primary">{{ item.num }}人</span>
												<span class="text-primary">{{ item.per }}</span>
											</div>
										</div>
									</div>
								</template>
								<template v-else>
									<div v-else>
										<p class="text-primary">学生答案请在学生答卷中查看</p>
									</div>
								</template>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-else>
			<div class="col-md-10 col-md-offset-1 anal-hint">
				<p>没有学生提交试卷，暂无数据分析</p>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		function initVm(quiz, questions, others) {
			$("#analyze-container").show();
			vm = new Vue({
				el: "#analyze-container",
				data: {
					quiz: quiz,
					questions: questions,
					others: others,
					typeValue : ["判断题", "单选题", "多选题", "填空题", "简答题", "全部题型"],
					sortType: 0, // 0是题号，1是正确率
					curType: 5,
				},
				methods: {
					sortBySer: function(event) {
						// 处理图标
						if (event.target.tagName.toLowerCase() == "span")
							var btn = $(event.target).parent();
						else
							var btn = $(event.target);
						btn.addClass("btn-active");
						btn.next().removeClass("btn-active");
						var span = btn.find(".glyphicon");
						if (span.hasClass("glyphicon-arrow-up"))
							span.removeClass("glyphicon-arrow-up").addClass("glyphicon-arrow-down");
						else
							span.removeClass("glyphicon-arrow-down").addClass("glyphicon-arrow-up");

						if (this.questions.length < 2)
							return;
						if (this.sortType == 0) {
							this.questions.reverse();
						} else {
							span.removeClass("glyphicon-arrow-down").addClass("glyphicon-arrow-up");
							this.questions.sort(function(value1, value2) {
								if (parseInt(value1.que_num) < parseInt(value2.que_num)) {
									return -1;
								} else if (parseInt(value1.que_num) > parseInt(value2.que_num)) {
									return 1;
								} else {
									return 0;
								}
							});
						}
						this.sortType = 0;
					},
					sortByAccu: function() {
						// 处理图标
						if (event.target.tagName.toLowerCase() == "span")
							var btn = $(event.target).parent();
						else
							var btn = $(event.target);
						btn.addClass("btn-active");
						btn.prev().removeClass("btn-active");
						var span = btn.find(".glyphicon");
						if (span.hasClass("glyphicon-arrow-up"))
							span.removeClass("glyphicon-arrow-up").addClass("glyphicon-arrow-down");
						else
							span.removeClass("glyphicon-arrow-down").addClass("glyphicon-arrow-up");

						if (this.questions.length < 2)
							return;
						if (this.sortType == 1) {
							this.questions.reverse();
						} else {
							span.removeClass("glyphicon-arrow-up").addClass("glyphicon-arrow-down");
							this.questions.sort(function(value1, value2) {
								var value1 = parseInt(value1.accuracy.split("%")[0]); // 拿到百分比
								var value2 = parseInt(value2.accuracy.split("%")[0]);
								if (value1 < value2) {
									return 1;
								} else if (value1 > value2) {
									return -1;
								} else {
									return 0;
								}
							});
						}
						this.sortType = 1;
					},
					disByType: function(index) {
						this.curType = index;
					}
				}
			})
		}

		$(function() {

			var qus_id = location.search.substring(1).split("=")[1];
			postApi("__MODULE__/QuizResult/countResult", {qus_id: qus_id}, function(err, data) {
				if (err) {
					showError(err.message);
				} else {
					others = {
						"stuNum": data.data.stu_num,
						"submitNum": data.data.submitNum,
						"passNum": data.data.passNum,
						"max": data.data.max,
						"min": data.data.min,
						"avg": data.data.avg,
						"datetime": data.data.datetime,
						"totalScore": data.data.total_score
					}
					// 初始化Vue
					initVm(data.data.quiz, data.data.questions, others);
					// 初始化表格
					var group = data.data.group,
							labels = [],
							chartData = [],
							i,
							len = group.length;
					for (i = 0; i < len; i++) {
						labels.push(group[i].range+"分");
						chartData.push(group[i].num);
					}
					if (parseInt(data.data.submitNum) < 1)
						return;
					var data = {
						labels : labels,
						datasets : [
							{
								fillColor : "rgba(52, 152, 219,1.0)",
								strokeColor : "rgba(52, 152, 219,1.0)",
								data : chartData
							},
						]
					}
					var ctx = document.getElementById("anal-chart").getContext("2d");
					var chart = new Chart(ctx).Bar(data, {scaleGridLineWidth: 0, barValueSpacing : 50-(chartData.length-6)*5,scaleLabel : "<%=value%>人"});
				}
			})
		})

		// 根据index值设置选项代码
		Vue.filter("showItemCode", function (index) {
			var index = index+"";
			if (index.length > 1) {
				var retn = "",
						i,
						len = index.length;
				for (i = 0; i < len; i++) {
					retn += String.fromCharCode(65+parseInt(index[i])) + "、";
				}

			} else {
				var retn = String.fromCharCode(65+parseInt(index)) + "、";
			}
			return retn.substring(0, retn.length-1);
		});

		//导出excel
		$(".exportQuizGrades").click(function(){
			var qus_id = location.search.substring(1).split("=")[1];
			window.open("__MODULE__/ExportExcel/exportQuizGrade?qd="+qus_id);
		});
	</script>
</block>